<template>
	<view class="addressConter">
		<view class="nullData  _width" v-if="addressListData.length==0">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
			<text>暂无数据</text>
		</view>

		<view class="rowConter" v-else>
			<view class="card flex _width" v-for="(item,index) in addressListData" :key="index">
				<view class="userInfo flex _width dian" @click="oncheckAddress(item.id)">
					<view class="name dian">{{item.consignee}}</view>
					<view class="phone">{{item.mobile}}</view>
				</view>
				<view class="address flex _width dian"  @click="oncheckAddress(item.id)">
					<view class="text dian2">
						{{item.province_name}}&nbsp;{{item.city_name}}&nbsp;{{item.county_name}}&nbsp;{{item.address}}
					</view>
				</view>
				<view class="edit flex _width">
					<view class="left flex">
						<checkbox v-if="item.default == 0" :checked="item.default" @click="defalut(item)">
						</checkbox>

						<image v-if="item.default == 1"
							src="https://img.zhizhuangtong.com/project_media/img/xcx/checkbox.png" mode=""></image>
						设为默认
					</view>

					<view class="right">
						<button type="default" @click="deleteCLick(item.id)">删除</button>
						<button type="default" @click="editAddress(item.id)">修改</button>
					</view>
				</view>

			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottomFexBtn">
			<view class="rowConter">
				<view class="row">
					<view  @click="addAddress" :class="addressListData.length<30?'btn':'btn2'">
						新增收货地址
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted,
		onUnmounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		addressList,
		defaultAddress,
		delAddress
	} from '@/api/order.js';

	const addressListData = ref([]); // 地址列表

	onMounted(() => {

		console.log('000')
		queryAddressList();
	})
	onShow(() => {
		uni.setStorageSync('isSave', 0)
		uni.setStorageSync('location', '')
		uni.setStorageSync('locationName', '')
		uni.$on('refreshIfNeeded', function(dat) {
			if (dat) {
				// console.log('1111')
				queryAddressList();
			} 
			uni.$off('refreshIfNeeded')
		})
		queryAddressList();
	});

	// 地址列表
	const queryAddressList = async () => {
		const res = await addressList();
		if (res.code === 1) {
			addressListData.value = res.data.list;
		} else {
			// 处理失败情况
		}
	};

	// 修改地址
	const editAddress = (id) => {
		uni.navigateTo({
			url: `/pages/order/addAddress/index?type=edit&id=${id}`,
		});
	};
	
	//单次 选中某个地址
	const oncheckAddress = (id)=>{
		console.log('ididididid',id)
		setTimeout(() => {
			uni.navigateBack();
			uni.$emit('refreshIfNeeded', true,id)
			
		}, 500);
		uni.$emit('refreshIfNeeded2', true,id)
	}
    onUnload(()=>{
		uni.$off('refreshIfNeeded2')
	})
	// 添加地址
	const addAddress = () => {
		if(addressListData.value.length>30){
			uni.showToast({
				icon: 'none',
				title: '地址最多可以添加30个',
			});
			return
		}else{
			uni.navigateTo({
				url: '/pages/order/addAddress/index?type=add',
			});
		}
	
	};

	// 删除地址
	const deleteCLick = async (id) => {
		const params = {
			id:id
		};
		const res = await delAddress(params);
		if (res.code === 1) {
			uni.showToast({
				icon: 'none',
				title: '删除成功',
				success: () => {
					// 删除成功后重新获取地址列表
					queryAddressList();
				},
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg,
			});
		}
	};

	// 设置默认地址
	const defalut = async (item) => {
		// 如果当前选择的已经是默认地址，不进行操作
		if (item.default === 1) {
			return;
		}
		// 找到当前的默认地址并取消勾选
		const currentDefault = addressListData.value.find((address) => address.default === 1);
		if (currentDefault) {
			currentDefault.default = 0; // 取消原默认地址的勾选
		}

		// 设置新的默认地址
		item.default = 1; // 将当前地址设置为默认地址
		const params = {
			id: item.id
		};
		const res = await defaultAddress(params);
		if (res.code === 1) {
			// 更新地址列表
			addressListData.value = [...addressListData.value];
			queryAddressList();
			uni.showToast({
				icon: 'none',
				title: '设置成功',
			});
		} else {
			// 操作失败，恢复状态
			item.default = 0;
			if (currentDefault) {
				currentDefault.default = 1;
			}
			uni.showToast({
				icon: 'none',
				title: res.msg,
			});
		}
	};
</script>



<style lang="less" scoped>
	.addressConter {
		min-height: 100vh;
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;

		::v-deep .u-checkbox__icon-wrap {
			// background-color:#CCA05F!important;
			// border-color:#CCA05F!important;
			// border: 1px solid #CCA05F!important;
		}

		.rowConter {
			display: flex;
			flex-wrap: wrap;

			.card {
				flex-wrap: wrap;
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 20rpx;
				padding: 25rpx;
				// box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, .08);
				box-sizing: border-box;

				&:last-child {
					margin-bottom: 0;
				}

				.userInfo {
					display: flex;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.name {
						margin-right: 15rpx;
					}

					.phone {
						flex: 1;
					}
				}

				.address {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding: 15rpx 0 30rpx;
					box-sizing: border-box;
				}

				.edit {
					justify-content: space-between;

					.left {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						align-items: center;

						image {
							width: 37rpx;
							height: 37rpx;
							margin-right: 10rpx;
						}
					}

					.right {
						display: flex;
						justify-content: flex-end;

						button {
							display: block;
							width: 120rpx !important;
							height: 50rpx;
							line-height: 50rpx;
							background: #FDFDFD;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							text-align: center;
							font-style: normal;
							text-transform: none;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							margin-right: 20rpx;

							&:last-child {
								margin-right: 0;
							}
						}

					}
				}
			}
		}


		.bottomFexBtn {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			padding-bottom: env(safe-area-inset-bottom);
			padding-bottom: constant(safe-area-inset-bottom);
			height: calc(120rpx + env(safe-area-inset-bottom));
			height: calc(120rpx + constant(safe-area-inset-bottom));
			width: 100%;
			// background-color: #000000 !important;
			// backdrop-filter: blur(10px) !important;
			// background-color: rgba(255, 255, 255, .82) !important;
			// box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;

			.rowConter {
				padding: 15rpx 25rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.row {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						width: 100%;
						height: 80rpx;
						background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
						border-radius: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					.btn2 {
						opacity: 0.5;
						width: 100%;
						height: 80rpx;
						background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
						border-radius: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}


				}
			}
		}

	}
</style>